<template>
    <DanceList :GeneralData='RecommendListData' v-infinite-scroll="load"/>
    <!-- 记载更多 -->
    <div class="loading_">
        <div class="loading_more" v-if="isShow" @click="ReloadMagicDB">
        <div class="loading_more_item">
            <p class="loading_more_item_P" >记载更多</p>
        </div>
    </div >
    <div v-loading="loading"  element-loading-text="加载中..." color="#f93684"  v-else></div>
    </div>
</template>

<script lang="ts">
import { defineComponent} from "vue";

export default defineComponent({
    name: "Recommend",
});
</script>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import {onMounted,ref} from 'vue'
import { DefaultDanceListItemType, RequestDefaultDanceList } from '@/api/Resource';


//创建一个首页数据
const RecommendListData = ref<DefaultDanceListItemType[]>([])
const num = ref(1)
// const route = useRoute()
const loading =ref(true)
onMounted(() => {
    getRecommendList(0)
})
const isShow = ref(true)
//进入推荐页就请求数据
 const getRecommendList=async(pageNum:number)=>{
//    console.log(route.query.column);
    const re = await RequestDefaultDanceList(pageNum)
    console.log(re.content,'11');
    RecommendListData.value.push(...re.content)
    isShow.value = true

 }
 const load =()=>{
    isShow.value = false
    if(num.value>1){
        return isShow.value = true
    } 
    num.value = num.value+1
    getRecommendList(num.value)
 }
 const ReloadMagicDB =()=>{
    isShow.value = false
    setTimeout(()=>{
        getRecommendList(num.value)
        num.value = num.value+1
    },1000)
 }
</script>

<style lang="scss" scoped>
    .loading_{
        min-height: 100px;
        .loading_more{
        .loading_more_item{
            .loading_more_item_P{
                display: block;
                width: 140px;
                height: 40px;
                line-height: 40px;
                font-size: 14px;
                color: #82858e;
                border: 1px solid #eaecf0;
                border-radius: 4px;
                background: #fff;
                text-align: center;
                margin: 20px auto 0;
                cursor: pointer;
            }
        }
    }
    }

    :deep(.path){
        stroke:#f93684 
    }
    :deep(.el-loading-text){
        color:#f93684 
    }
</style>